<template>
  <div class="group-box">
    <div class="groupList-left">
      <div class="groupList-left-list" v-for="(item,index) in groupListModel" :key="index" @click="sendChat(item.id)">
        <img :src="item.groupAvatar" class="left-list-img">
        <span class="left-list-title">
            {{ item.groupName }}
          </span>
      </div>
    </div>

    <div class="groupList-right">
      <GROUPMSG :obj="showChild" @showTool="showGroupToolMethod" :closeGroupProp="showGroupTool"></GROUPMSG>
    </div>


    <div class="group-tool-box" style="position: relative;">
      <el-drawer
          :style="{height:toolBoxHeight+'px',width:'300px',border:'3px solid #eae6e6',position:'absolute'}"
          :visible.sync="showGroupTool"
          direction="ltr"
          :modal="false"
          @close="closeGroupTool"
      >
        <div class="group-drawer-content">
          <span>群成员:</span>
          <br>
          <div class="group-drawer-content-top">
            <div class="group-drawer-content-member" v-for="(item,index) in memberList" :key="index">
              <el-avatar shape="square" size="small"
                         :src="item.avatar"></el-avatar>
              <span>{{ item.username }}</span>
            </div>
            <span class="insert-member">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </span>

          </div>
          <el-divider></el-divider>
          <div class="group-drawer-content-middle">
            <ul>
              <li>
                <span>群名称:</span>
                <el-input v-model="groupName" placeholder="请输入内容" clearable></el-input>
              </li>
              <li>
                <span>群公告:</span>
                <el-input v-model="groupTips" placeholder="请输入内容" clearable></el-input>
              </li>
            </ul>
          </div>
          <el-divider></el-divider>
          <div class="group-drawer-content-bottom">
            <div class="clear-group-msg">
              <el-button type="text">清空群聊记录</el-button>
              <el-divider></el-divider>
            </div>
            <div class="remove-group">
              <el-button type="text">解散群聊</el-button>
            </div>
          </div>
        </div>
      </el-drawer>
    </div>


  </div>
</template>

<script>
import {groupList} from '@/api/group/index'
import {getUserId} from "@/api/consumer/index";
import GROUPMSG from '@/views/group/groupMsg/index'
import websocket from "@/utils/websocket";

export default {
  name: "index",
  components: {GROUPMSG},
  data() {
    return {
      groupListModel: [],
      showChild: {
        receiverPerson: '',
        userId: '',
        show: false
      },
      showGroupTool: false,
      toolBoxHeight: 0,
      memberList: [
        {
          username: '张三',
          avatar: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
        }
      ],
      groupName: '',
      groupTips: ''
    }
  },
  methods: {
    //查询群聊列表
    groupListMethod() {
      groupList().then(res => {
        if (res.code === 200) {
          this.groupListModel = res.data
        }
      }).catch(error => {

      })
    },
    //子组件传值
    sendChat(groupId) {
      websocket.connectionGroup(groupId)
      let userId = this.queryUser();
      this.showChild = {
        receiverPerson: groupId,
        show: true,
        userId: userId
      }
    },
    //获取用户id
    queryUser() {
      let userId
      if (sessionStorage.getItem("userId") === undefined || sessionStorage.getItem("userId") === null) {
        getUserId().then(res => {
          if (res.code === 200) {
            userId = res.data
            sessionStorage.setItem("userId", res.data)
          }
        })
      } else {
        userId = sessionStorage.getItem("userId")
      }
      return userId
    },
    //展示工具栏
    showGroupToolMethod(val) {
      this.showGroupTool = val.flag
      this.toolBoxHeight = val.height
    },
    //关闭工具栏
    closeGroupTool() {
      this.showGroupTool = false
    }
  },
  mounted() {
    this.groupListMethod()
  }
}
</script>

<style scoped lang="scss">
.group-box {
  display: flex;
  height: 100%;
  width: 100%;
}

.groupList-left {
  overflow-y: auto;
  padding-top: 5px;
  padding-left: 10px;
  flex: 1;
  border: 3px solid #eae6e6;
  border-radius: 5px;
}

.groupList-left-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-rows: repeat(1, 1fr);
  grid-template-areas:
        "a b"
        "a b";
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.left-list-img {
  grid-area: a;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  margin-bottom: 10px;

}

.left-list-title {
  grid-area: b;
  grid-column-start: 2;
  grid-column-end: 4;
  margin-bottom: 10px;
  font-size: 14px;
}

.groupList-left-list:hover {
  background-color: #d7eee6;
}

.groupList-right {
  flex: 4;
  border: 3px solid #eae6e6;
  border-radius: 5px;
  border-left: none;
}

::v-deep .el-drawer {
  background-color: #eae6e6;
  width: 100% !important;
}

.group-drawer-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.group-drawer-content-top {
  flex: 4;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  align-items: center;
  overflow: auto;

  .group-drawer-content-member {
    span {
      width: 40px;
      height: 40px;
      font-size: 10px;
      text-align: -webkit-center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: block;
    }
  }

  .insert-member {
    text-align: center;
    margin-bottom: 20px;
    width: 40px;
    height: 40px;
  }
}

.group-drawer-content-middle {
  flex: 3;
}

.group-drawer-content-bottom {
  flex: 3;

  div {
    text-align: center;

    ::v-deep .el-button {
      color: red;
    }
  }
}
</style>